<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        a {
            text-decoration: none;
            color: black;
            font-family: fans-serif, serif;
            font-size: 40px;
            font-weight: bold;
            border: 2px solid black;
            padding: 40px 80px;
            position: absolute;
            overflow: hidden;
            top: 50%;
            left: 50%;
        }

        /*a::before {*/
        /*    content: "22222css";*/
        /*    font-size: 20px;*/
        /*    position: absolute;*/
        /*    left: 0;*/
        /*    top: 0;*/
        /*    height: 100%;*/
        /*    width: 100%;*/
        /*    background-color: black;*/
        /*    !*transform: translate(-100%);*!*/
        /*    !*transition: all 1s;*!*/
        /*    z-index: -1;*/
        /*}*/

        /*.button:hover:before {*/
        /*    transform: translateX(0);*/
        /*}*/

        /*a:hover {*/
        /*    color: white;*/
        /*}*/
    </style>
</head>
<body>
<a class="button">Hover Me</a>
</body>
</html>